<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增试题')" />
</head>
<style>
	.pre-exam div {
		line-height: 42px;
		color: #555555;
	 }
</style>
<body class="white-bg">
    <div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
    	<el-row :gutter="24">
    		<el-col :span="24" style="margin-bottom: 20px">
    			<el-alert title="点击`开始考试`后将自动进入考试，请诚信考试！"  type="error"  style="margin-bottom: 10px" ></el-alert>
    			<el-card class="pre-exam">
    				<div><strong>考试名称：</strong>{{ detailData.title }}</div>
		          	<div><strong>考试时长：</strong>{{ detailData.totalTime }}分钟</div>
		          	<div><strong>试卷总分：</strong>{{ detailData.totalScore }}分</div>
		          	<div><strong>及格分数：</strong>{{ detailData.qualifyScore }}分</div>
		          	<div><strong>考试描述：</strong>{{ detailData.content }}</div>
		          	<div><strong>考试次数：</strong>{{ detailData.tryCount }}</div>
		          	<div><strong>是否通过：</strong>{{ detailData.passed ? '通过':'未通过' }}</div>
    			</el-card>
    		</el-col>
    		<el-col :span="24">
    			<el-button type="primary"  :disabled="disabled" icon="el-icon-caret-right" @click="handleCreate">
          		开始考试
        		</el-button>
        		<el-button @click="handleBack">
          		返回
       			</el-button>
    		</el-col>
        </el-row> 
	</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" >
    	var prefix = ctx + "exam/examOnline";
    	var model = [[${model}]];
		var vObj = new Vue({
			el: '#app',
			data(){
				return{
					detailData:{},
					disabled: false
				}
			},
			methods: {
				handleCreate(){
					var url = prefix+"/createPaper/"+this.detailData.id;
			    	$.modal.parentTab("考试", url);
			    	//$.modal.openTab("考试准备", url);
				},
				handleBack(){
					closeItem();
				}
			},
			created(){
				this.detailData = model;
				if(model.maxCount != 0 && (model.tryCount >= model.maxCount || model.passed)){
					this.disabled = true;
				}
			}
		})
	</script>
</body>
</html>
